<template>
    <div class="collect">
        <div class="title">我的收藏</div>
        <el-empty description="暂无收藏" v-if="collect.length == 0"></el-empty>
        <div>
            <el-divider v-if="collect.length != 0"></el-divider>
            <div class="video" v-for="video in collect" :key="video.id">
                <div @click="router_video(video.id)">
                    <el-image style="width: 250px; height: 150px;border-radius: 10px;cursor: pointer;" :src="video.cover" referrerPolicy='no-referrer'
                        fit="fill"></el-image>
                </div>
                <div class="name">
                    <span class="span" @click="router_video(video.id)">{{ video.title }}</span>
                </div>
                <div style="font-size: 80%;color: #606266;margin-top: 10px;">
                    <i class="el-icon-user"></i> {{ video.publisherName }} · {{ video.createTime }}
                    <el-dropdown style="float: right;font-size: 140%;cursor: pointer;" placement="bottom-end" trigger="click" @command="deletecollect">
                        <i class="el-icon-more"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :command="video.id">取消收藏</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
            <div class="pagination">
                <el-pagination
                background
                :current-page="page"
                @current-change="sizechange"
                hide-on-single-page
                :page-size="9"
                layout="prev, pager, next"
                :total="collectnum">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import UserChatApi from "@/api/user-chat"
import PersonalCenterApi from "@/api/personal-center"
import UserManagementApi from "@/api/user-management"
import VideoPlayApi from "@/api/video-play"
import VideoSearchApi from "@/api/video-search"
export default {
    data(){
        return{
            collect:[],//收藏视频数据
            page:1,//本页页码
            collectnum:0,//总收藏个数
        }
    },
    created(){
        var _this = this
        UserManagementApi.SubmitUser().then(res => {
            var id = res.data.data.id
            PersonalCenterApi.SubmitByUserIdGetCollect(1,9,id).then(res => {
                if(res.data.code == 200){
                    _this.collect = _this.collect.concat(res.data.data.records)
                }
            })
            //获取收藏数
            PersonalCenterApi.SubmitByUserIdGetCollectNum(id).then(res => {
                _this.collectnum=res.data.data
            })
        })
        
    },
    methods:{
        //跳转到视频页面
        router_video(id){
            var {href} = this.$router.resolve({
                name:'video',
                query:{
                    id:id
                }
            })
            window.open(href,"_blank");
        },
        //空方法
        load(){},
        //取消收藏
        deletecollect(vid){
            this.$confirm('您确定要取消收藏吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    var uid = sessionStorage.getItem('id')
                    var collect = {
                        uid:uid,
                        vid:vid
                    }
                    PersonalCenterApi.SubmitDeleteCollect(collect).then(res => {
                        this.$router.go(0)
                    })
                }).catch(() =>{})
        },
        //页码变化
        sizechange(page){
            var _this = this
            _this.page = page
            _this.collect = []
            var id = sessionStorage.getItem('id')
            //获取收藏视频
            var collect = {
                uid:id
            }
            PersonalCenterApi.SubmitByUserIdGetCollect(page-1,9,collect).then(res => {
                if(res.data.code == 200){
                    _this.collect = _this.collect.concat(res.data.data.records)
                }
            })
        }
    }
};
</script>

<style scoped>
.collect{
    text-align: left;
    padding: 15px;
}
.title{
    color: black;
    font-size: 150%;
}
.video {
    float: left;
    margin-left: 20px;
    height: 250px;
    width: 250px;
    margin-right: 20px;
}
.name {
    height: 40px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-family: "PingFang SC", "Hiragino Sans GB";
    font-weight: 600;
}
.pagination{
    float: left;
    width: 100%;
    text-align: center;
    margin-bottom: 100px;
    margin-top: 50px;
}
.span:hover{
    color: #409EFF;
    cursor: pointer;
}
</style>